<template>
	<view class="container">
		<view class="homeBg">
			<view @tap="back" class="icon-left">
				<u-icon name="arrow-left" color="#fff" size="16"></u-icon>
			</view>
			<view class="title">积分明细</view>
			<!-- <image src="../../static/home/search.png" mode="widthFix" class="searchIcon"></image> -->
		</view>
		<view class="searchBox">
			<u-search placeholder="请输入积分名称" v-model="billName" @search="searchFn" @custom="searchFn"></u-search>
		</view>
		<view class="goods_list">

			<view class="listCentent" v-if="list.length>0">
				<view class="list-item" v-for="(item,index) in list" :key="index"
				>
					<view class="list-item-center">
						<u-row justify="space-between" customStyle="margin-bottom: 10px">
							<u-col span="6">
								<view class="name">{{item.billName}}({{item.billCode}})</view>
							</u-col>
							<u-col span="6">	
								<view class="name top">{{item.recordType == 1?'+':'-'}} {{item.transactionMoney}}</view>
							</u-col>
						</u-row>
						<u-row justify="space-between" customStyle="margin-bottom: 10px">
							<u-col span="6">
								<view class="name time" >{{moment(item.created).format('YYYY-MM-DD HH:mm:ss')}}</view>
							</u-col>
							<u-col span="6" v-if="item.accountType == 1">
								<view class="name right">余额 {{item.balanceMoney}}</view>
							</u-col>
							<u-col span="6" v-else>
								<view class="name right">冻结 {{item.balanceMoney}}</view>
							</u-col>
						</u-row>
						<u-row justify="space-between" >
							<u-col span="12">
								<view class="name time" >{{item.explainValue}}</view>
							</u-col>
							
						</u-row>


					</view>
				</view>
				<view class="msg" v-if="isEnd&&list.length>0">
					<image src="../../static/home/line.png" mode="widthFix" class="left-line"></image>
					<text class="text">没有更多内容啦</text>
					<image src="../../static/home/line.png" mode="widthFix" class="right-line"></image>
				</view>
			</view>
			<view v-show="list.length == 0" class="noListBox">
				<view class="noData">
					<image class="noDataImg" src="../../static/home/noData.png" mode=""></image>
					<view class="text">暂无数据</view>
				</view>
			</view>
		</view>

		<view class="popupBox" v-if="!hasLogin && isPopupShow">
			<view v-if="!hasLogin">
				<text>请先前往登录吧！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去登录</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
			<view v-if="hasLogin && uerInfo.isRealName != 1">
				<text>实名认证后才可以购买哦！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去认证</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		PATH_IMG,
		BASE_API
	} from '@/common/config.js';
	import {
		exuserbillassetsrecordList,
		exuserbillassetsList,
		tradesUserSellTicket
	} from "@/api/home.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		throttle
	} from "@/common/util.js"
	export default {
		data() {
			return {
				isScrollY: false,
				list: [],
				swiperCurrent: 0,
				page: 1,
				pageSize: 8,
				status: "0",
				isEnd: false,
				billName: "",
				isShowModal: false,
			}
		},
		onLoad() {
			this.getList(this.page, this.pageSize);
		},
		onShow() {
			if (!this.hasLogin) {
				uni.reLaunch({
					url: "/pages/login/login"
				});
			}
		},
		computed: {
			...mapState(["hasLogin", "uerInfo", "h5Data"])
		},
		methods: {
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				};
			},
			searchFn() {
				this.page = 1;
				this.isEnd = false;
				this.getList(1);
			},
			pledge(item) {

			},
			getList(page, pageSize) { //新闻
				let obj = {
					page,
					pageSize: pageSize || 8,
					billName_like: this.billName,
					billType: '0,1,3'
				}
				exuserbillassetsrecordList(obj).then(res => {
					if (res.data.rows.length > 0) {
								let list = [...res.data.rows];
						// if (this.status == "0") {
							// let list = []
							// list = newList.filter(item => {
							// 	return item.hotNumber > 0
							// })
							if (page == 1) {
								this.list = [];
								this.list = [...list]
							} else {
								this.list = [...this.list, ...list]
							}
						

					} else {
						if (page == 1) {
							this.list = []
						}
						return;
					}
					if (this.page >= res.data.totalPage) {
						this.isEnd = true;
						return
					};

					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			},
		},
		onReachBottom: throttle(function() {
			if (!this.isEnd) {
				this.page++;
				this.getList(this.page)
			} else {
				return
			}
		}, 800),
	}
</script>
<style scoped lang="less">
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.container {
		width: 100%;
		height: 100%;
		padding-top: 230upx;

		.homeBg {
			width: 100%;
			height: 120upx;
			background: url(../../static/login/bg.png) no-repeat top center;
			background-size: 100% 500%;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9;

			.icon-left {
				position: absolute;
				left: 42upx;
				// bottom: 50upx;
				top: 50%;
				transform: translateY(-50%);
			}

			.title {
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.searchIcon {
				width: 44upx;
				position: absolute;
				right: 42upx;
				// bottom: 50upx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.searchBox {
			width: 100%;
			padding: 20upx 30upx;
			position: fixed;
			top: 120upx;
			left: 0;
			z-index: 9;
			background-color: #fff;
		}

		.popupBox {
			width: 100%;
			height: 84upx;
			position: fixed;
			bottom: 118upx;
			left: 0;
			padding: 0 40upx;
			z-index: 99;

			>view {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FCCC35;
				border-radius: 10upx;
				font-size: 24upx;
				padding: 0 30upx;
				color: #151515;

				.btns {
					display: flex;
					align-items: center;
					font-size: 0;

					.navigator {
						width: 130upx;
						height: 55upx;
						background: #191919;
						border-radius: 28upx;
						font-size: 24upx;
						font-weight: 400;
						color: #FCCC35;
						line-height: 55upx;
						text-align: center;
						margin-right: 10upx;
					}
				}
			}
		}

		.tabBox {
			width: 100%;
			padding: 0upx 20upx 30upx;
			position: fixed;
			left: 0;
			top: 224upx;
			background-color: #fff;
			z-index: 9;
		}

		.goods_list {
			width: 100%;

			.msg {
				text-align: center;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #BCBCBC;
				margin-top: 30upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin: 0 20upx;
				}

				.left-line {
					width: 100upx;
				}

				.right-line {
					width: 100upx;
					transform: rotate(-180deg);
				}

				// padding-bottom: 100upx;
			}

			// height: calc(100% - 30upx);

			.listCentent {
				width: 100%;
				padding: 0 30upx 50upx;

				.list-item {
					width: 100%;
					box-shadow: 0px 2px 7px 0px rgba(211, 211, 211, 0.5800);
					border-radius: 10upx;
					padding: 15upx 20upx 30upx;
					margin-bottom: 20upx;
					position: relative;

					.btn {
						background: #CEA539;
						border-radius: 10upx;
						font-size: 32upx;
						font-weight: bold;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 20upx;
						bottom: 20upx;
						padding: 10upx 30upx;
					}

					.left-line {
						width: 8upx;
						height: 40upx;
						position: absolute;
						left: 0;
						top: 46upx;
						background-color: #AAAAAA;
					}

					.one {
						color: #C20707;
						background-color: #C20707;
					}

					.two {
						color: #CEA539;
						background-color: #CEA539;
					}

					.type {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						position: absolute;
						right: 54upx;
						bottom: 42upx;
						color: #AAAAAA;
					}

					.type_one {
						color: #C20707;
					}

					.type_two {
						color: #CEA539;
					}

					.list-item-top {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid rgba(51, 51, 51, .1);

						.goods-name {
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 94upx;

							.date {
								color: #333333;
							}
						}
					}

					.list-item-center {
						width: 100%;
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;

						.name {
							font-size: 25upx;
							color: #333333;
							font-weight: bold;
							margin-top: 10upx;
						}
						.right {
							text-align: right;
							font-size: 20upx;
							font-weight: 500;
						}
							
						.balanceMoney {
							text-align: right;
							font-size: 30upx;
							font-weight: 500;
						}
						.top {
							text-align: right;
							font-size: 25upx;
						}
						.time {
							font-size: 20upx;
							font-weight: 500;
						}

						.number {
							// margin-bottom: 30upx;
						}
					}
				}

			}

		}

		.noListBox {
			text-align: center;

			.noData {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-top: 500upx;

				.noDataImg {
					width: 316upx;
					height: 126upx;
				}

				.text {
					font-size: 26upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B0B5BC;
					line-height: 92upx;
				}
			}
		}
	}
</style>
